<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.date-box {
				width: 400px;
				height: 500px;
				background: deepskyblue;
			}

			.date-title {
				padding: 80px 0 30px;
				font-size: 22px;
				text-align: center;
				color: #fff;
			}

			i {
				font-style: normal;
			}

			.date-date {
				width: 200px;
				height: 200px;
				margin: 80px auto 0;
				color: #fff;
				font-size: 80px;
				text-align: center;
				line-height: 200px;
				background-color: greenyellow;
			}

			.xq {
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="date-item">
				<div class="date-box">
					<div class="date-title">
						<i class="year">1999</i><span>年</span><i class="month">1</i><span>月</span>
						<i class="date">21</i><span>日</span><span class="xq">星期</span><i class="day">1</i>
					</div>
					<div class="time">
						<span>1</span>天
						<span>00</span>:<span>00</span>:<span>00</span>
					</div>
					<div class="date-date">
						<span>4</span>
					</div>
				</div>
			</div>
			<button type="button" id="jt">展示今天日期</button>
			<button type="button" id="cj">春节倒计时</button>
		</div>
	</body>
	<script type="text/javascript">
		var oYear = document.querySelector(".year");
		var oMonth = document.querySelector(".month");
		var oDate = document.querySelector(".date");
		var oDay = document.querySelector(".day");
		var oDate = document.querySelector(".date-date");

		var arrDay = ['一', '二', '三', '四', '五', '六', '日'];

		var date = new Date();
		var endDate = new Date("2021/2/12");
		var endMiuss = endDate - date;
		var timer = null;

		dTime();
		setInterval(function() {
			djs();
		}, 1000)

		function djs() {
			var date = new Date();
			var endDate = new Date("2021/2/12");
			var endMiuss = endDate - date;
			var d = Math.floor(endMiuss / (1000 * 60 * 60 * 24));
			var h = Math.floor(endMiuss / (1000 * 60 * 60) % 24);
			var m = Math.floor(endMiuss / (1000 * 60) % 60);
			var s = Math.floor(endMiuss / 1000 % 60);
			document.querySelectorAll(".time span")[0].innerHTML = zero(d);
			document.querySelectorAll(".time span")[1].innerHTML = zero(h);
			document.querySelectorAll(".time span")[2].innerHTML = zero(m);
			document.querySelectorAll(".time span")[3].innerHTML = zero(s);
		}

		function dTime() {
			oYear.innerHTML = zero(date.getFullYear());
			oMonth.innerHTML = zero(date.getMonth() + 1);
			oDate.innerHTML = zero(date.getDate());
			oDay.innerHTML = arrDay[date.getDay() - 1];
			oDate.innerHTML = zero(date.getDate());
		}

		function zero(i) {
			return i < 10 ? '0' + i : i;
		}
	</script>
</html>
